<template>
    <div id="" class="schu">
        删除车辆

      <!--车辆详情-->
      <div>
        <ul class="xtul">
          <li>
            <div>编号</div>
            <div>车辆品牌</div>
            <div>购买时间</div>
            <div>车牌号</div>
            <div>车辆类型</div>
            <div>总里程</div>
            <div>油耗</div>
            <div>基本费用</div>
            <div>养路费</div>
            <div>箱数</div>
            <div>核载人数</div>
            <div>总费用</div>
            <div>载重</div>
            <div></div>
          </li><!--item in xiangqing-->
          <li  v-for="(item ,index) in  xiangqing" v-if="item.owner==userName.name">
            <div>{{item.serial_number}}</div>
            <div>{{item.manufacturing_company}}</div>
            <div>{{item.purchasing_date | fil("YYYY-MM-DD")}}</div>
            <div>{{item.license_plate_number}}</div>

            <div>{{item.model_of_car}}</div>
            <div>{{item.the_total_mileage}}</div>

            <div>{{item.fuel_consumption}}</div>
            <div>{{item.basic_maintenance_cost}}</div>
            <div>{{item.road_toll}}</div>
            <div>{{item.cumulative_total_cost}}</div>
            <div>{{item.busload}}</div>
            <div>{{item.carton_numbers}}</div>
            <div>{{item.load_capacity}}</div>
            <div>
              <button @click="schu(index)">删除</button>
            </div>
          </li>
        </ul>
       <!-- <ul class="xq">
          <li>
            <div>编号</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.serial_number}}</div>
          </li>
          <li>
            <div>车辆品牌</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.manufacturing_company}}</div>
          </li>
          <li>
            <div>购买时间</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.purchasing_data}}</div>
          </li>
          <li>
            <div>车牌号</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.license_plate_number}}</div>
          </li>
          <li>
            <div>车辆类型</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.model_of_car}}</div>
          </li>
          <li>
            <div>总里程</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.the_total}}</div>
          </li>
          <li>
            <div>油耗</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.fuel_consumption}}</div>
          </li>
          <li>
            <div>基本费用</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.basic_maintenance_cost}}</div>
          </li>
          <li>
            <div>养路费</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.road_toll}}</div>
          </li>
          <li>
            <div>总费用</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.cumulative_total_cost}}</div>
          </li>
          <li>
            <div>核载人数</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.busload}}</div>
          </li>
          <li>
            <div>箱数</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.carton_numbers}}</div>
          </li>
          <li>
            <div>载重</div>
            <div v-for="item in xiangqing" v-if="item.owner==userName.name">{{item.load_capacity}}</div>
          </li>
          <li>
            <div>删除</div>
            <div v-for="(item,index) in xiangqing"><mt-button type="default" @click="schu(index)">删除</mt-button></div>
          </li>

        </ul>-->
      </div>
    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "number_vehicles",
      props:['userName'],
      data(){
          return{
            xiangqing:[],
            xing:[]
          }
      },
      created(){
          this.getchusi();
      },
      methods:{
        //请求初始信息
        getchusi:function () {
          this.$http.get('/api/user/referVehicle',).then(function(response){
            this.xiangqing  = response.body; //把用户数据 传给数组.xiangqing


          })
        },
        schu:function (s) {//f 点击那行的 index
        /*  console.log(this.userName.name);
          var n = this.userName.name;

          var ar = new Array;
          for(var i=0;i<this.xiangqing.length;i++){
            if(this.xiangqing[i].name == n){
              ar.push(this.xiangqing[i]);
            }
            //console.log(ar,this.xiangqing[i]);
          }
          //console.log(ar,this.xiangqing[i]);*/
          //提醒用户是否删除数据
          if(!confirm('是否删除数据')){
            return;//当用户点击取消 应阻断这个方法的 后面代码的执行
          }
          var ids = this.xiangqing[s].id;
          this.$http.post('/api/user/delVehicle',{
            id: ids
          },{}).
          then((response) => {
            //console.log(response);
            Toast({
              message: '删除成功',
              position: 'bottom',
              duration: 5000
            });
          })

          //刷新列表
          this.getchusi();


        }
      }
    }
</script>

<style scoped>
  .mint-button{
    background-color: rgba(255, 0, 0, 0.67);
    color:white;
    height: 100%;font-size: 12px;vertical-align: middle}
  .schu{width: 100%}
  .xtul{
    font-size: 12px;
    width:100%;color:black;margin: 20px auto;}
  .xtul>li{display: flex;margin-bottom: 2px}
  .xtul>li:first-child{font-size: 14px;margin-bottom: 10px}
  .xtul>li:not(:first-child){
    border:1px solid darkgray;
    border-raius:3px
  }
  .xtul>li>div{flex:1;vertical-align: middle}


</style>
